<template>
  <div>
    <!-- banner区域 -->
    <!-- 8个图标上面的4个 -->
    <div class="bantop">
      <router-link to="/zgl" class="bantopone">
        <span class="gl"></span>
        <p style="color: #ff9d00">找攻略</p>
      </router-link>
      <router-link to="/youji" class="bantopone">
        <span class="yx"></span>
        <p style="color: #ff9d00">看游记</p>
      </router-link>
      <router-link to="/dr" class="bantopone">
        <span class="dr"></span>
        <p style="color: #ff9d00">问达人</p>
      </router-link>
      <router-link to="/tn" class="bantopone">
        <span class="tn"></span>
        <p style="color: #ff9d00">头脑学院</p>
      </router-link>
    </div>
    <!-- 8个图标下面4个 -->
    <div class="banbotm">
      <router-link to="/hotel" class="banbotmone">
        <span class="jd"></span>
        <p style="color: #ff9d00">酒店</p>
      </router-link>
      <router-link to="lx" class="banbotmone">
        <span class="lx"></span>
        <p style="color: #ff9d00">去旅行</p>
      </router-link>
      <router-link to="jip" class="banbotmone">
        <span class="jp"></span>
        <p style="color: #ff9d00">机票</p>
      </router-link>
      <router-link to="ddwl" class="banbotmone">
        <span class="wl"></span>
        <p style="color: #ff9d00">当地玩乐</p>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style scoped>
/* banner区域 */
/* 上下两个大容器 */
.bantop,
.banbotm {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  display: -webkit-flex;
  width: 100%;
  text-align: center;
  margin: 10px 0;
}
/* 容器中的span */
.bantop span,
.banbotm span {
  display: block;
  margin: 0 auto;
  width: 45.75px;
  height: 45.75px;
}
.bantopone,
.banbotmone {
  width: 25%;
}
.bantop .gl {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: 0px 0px;
}
.bantop .yx {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: 0px -46px;
}
.bantop .dr {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -92px -46px;
}
.bantop .tn {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -233px -45px;
}
.banbotm .jd {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -233px 0px;
}
.banbotm .lx {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -92px 0px;
}
.banbotm .jp {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -139px 0px;
}
.banbotm .wl {
  background: url("~assets/img/banner.png");
  background-size: 11.7rem;
  background-position: -139px -45px;
}
</style>
